<template>
    <div class="shops">
      <h3 class="shops-title">热门店铺</h3>
      <router-link
        v-for="shop in shopList"
        :key="shop.id"
        :to="`/shop/${shop.id}`">
            <shop-info :shop="shop" />
      </router-link>
    </div>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import shopInfo from '@/components/shop/index.vue'
import { useShopStore } from '@/store/shop'
import { storeToRefs } from 'pinia'

const shopStore = useShopStore()
const { shopList } = storeToRefs(shopStore)


  onMounted(async() => {
    await shopStore.getHotShop()
  })

</script>

<style lang="scss" scoped>
.shops {
    &-title {
      position: relative;
      margin: 1.6rem 0 0.4rem;
      font-size: 1.8rem;
      font-weight: normal;
      &::before {
        content: '';
        position: absolute;
        width: 4rem;
        height: 0.2rem;
        left: 1.5rem;
        bottom: -0.2rem;
        border-radius: 0.3rem;
        background: #dd514c;
      }
    }
}
</style>